<template>
  <div class="box">
    <header class="header">
      <div class="left">
        <router-link tag="div" to="/" class="iconfont icon-zuojiantou1"></router-link>
        <h1>签到领现金</h1>
      </div>
    </header>
    <mt-popup v-model="popupVisible" position="bottom">
      <ul class="share">
          <li>
            <span class="iconfont icon-pengyouquan1"></span>
            <i>朋友圈</i>
          </li>
          <li>
            <span class="iconfont icon-weixin31"></span>
            <i>微信</i>
          </li>
          <li>
            <span class="iconfont icon---"></span>
            <i>新浪微博</i>
          </li>
          <li>
            <span class="iconfont icon-qq1"></span>
            <i>QQ好友</i>
          </li>
      </ul>
    </mt-popup>
    <div class="content">
      <img src="./../assets/signin.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      popupVisible: false
    }
  },
  methods: {
    share () {
      this.popupVisible = !this.popupVisible
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    .left {
      display: flex;
      align-items: center;
      margin-left: 15px;
      h1 {
        margin-left: 30px;
      }
    }
    .share {
      margin-right: 15px;
    }
  }
  .content {
    img {
      height: 101%;
      width: 100%;
    }
  }
  .mint-popup{
  width: 95%;
  height: 1.3rem;
  margin-bottom: 0.1rem;
  border-radius: 0.1rem; 
  .share{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    padding: 0.1rem 0.1rem;
    li{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      span{
        font-size: 0.3rem;
      }
      i{
        font-size: 0.12rem;
      }
    }
    li:nth-child(1){
      span{
        color: #40F2FF;
      }
    }
    li:nth-child(2){
      span{
        color: #44C814;
      }
    }
    li:nth-child(3){
      span{
        color: #E73067;
      }
    }
    li:nth-child(4){
      span{
        color: skyblue;
      }
    }
  }
}
}
</style>
